<template>
  <!-- Header Start -->
  <el-card class="!border-none mt-4" shadow="never">
    <el-page-header content="订单详情" @back="$router.back()" />
  </el-card>
  <!-- Header End -->

  <div class="order-detail-main">
    <!-- 订单信息 Start -->
    <el-card class="!border-none mt-4" shadow="never" style="padding: 0 20px">
      <template #header>
        <div class="card-header">
          <span class="font-medium nr">订单信息</span>
        </div>
      </template>
      <!-- 订单信息 -->
      <el-form :inline="true" :model="formData" label-width="auto">
        <el-form-item label="订单状态: ">
          <div class="content text-warning">
            {{ formData.orderStatusName || "-" }}
          </div>
        </el-form-item>
        <el-form-item label="支付状态: ">
          <div class="content">{{ formData.payStatusName || "-" }}</div>
        </el-form-item>
        <el-form-item label="订单编号: ">
          <div class="content">{{ formData.sn || "-" }}</div>
        </el-form-item>
        <el-form-item label="支付方式: ">
          <div class="content">{{ formData.payWayName || "-" }}</div>
        </el-form-item>
        <el-form-item label="下单时间: ">
          <div class="content">{{ formData.createTime || "-" }}</div>
        </el-form-item>
        <el-form-item label="支付时间: ">
          <div class="content">{{ formData.payTime || "-" }}</div>
        </el-form-item>
        <el-form-item label="用户昵称: ">
          <div class="content">{{ formData.nickname || "-" }}</div>
        </el-form-item>
        <el-form-item label="用户备注: ">
          <div class="content">{{ formData.userRemark || "-" }}</div>
        </el-form-item>
        <el-form-item label="核销码: ">
          <div class="content">{{ formData.verificationCode || "-" }}</div>
        </el-form-item>
        <el-form-item label="核销状态: ">
          <div class="content">
            <span class="warning" v-if="formData.verificationStatusName">{{
              formData.verificationStatusName
            }}</span>
            <span v-else>-</span>
          </div>
        </el-form-item>
        <el-form-item label="完成时间: ">
          <div class="content break-words">
            {{ formData.finishTime || "-" }}
          </div>
        </el-form-item>
        <el-form-item label="商家备注: ">
          <div class="w-[300px] break-words">
            {{ formData.orderRemarks || "-" }}
          </div>
        </el-form-item>
      </el-form>
      <!-- Button Group Start -->
      <div class="button-group">
        <operation
          btnStyle="primary"
          :id="id"
          :cancelBtn="formData.cancelBtn"
          :verificationBtn="formData.verificationBtn"
          :verificationStatus="formData.verificationStatus"
          :verificationCode="formData.verificationCode"
          :orderRemarks="formData.orderRemarks"
          @refresh="getOrderDetail"
        />
      </div>
      <!-- Button Group End -->
    </el-card>
    <!-- 订单信息 End -->

    <!-- 服务师傅 Start -->
    <el-card
      class="!border-none mt-4"
      shadow="never"
      style="padding: 0 20px"
      v-if="formData.orderStatus !== 0"
    >
      <template #header>
        <span class="font-medium nr">服务师傅</span>
      </template>
      <!-- 服务师傅 -->
      <el-form :inline="true" :model="formData" label-width="auto"   :label-position="'top'">
        <el-form-item label="服务师傅" >
            <div
            v-if="formData.orderStatus !== 1"
            class="flex items-center"
          >
            <div class="flex items-center" v-for=" (item ,i) in formData.staff">
              <el-image
                  style="width: 44px; height: 44px; border-radius: 50%"
                  :src="item.userVo.avatar"
                  :fit="'cover'"
              ></el-image>
              <div class="mx-2">
                {{ item.name }}
              </div>
            </div>
          </div>
          <div v-if="formData.orderStatus == 1 || formData.orderStatus == 2">
            <div v-if="!formData.staffId && btnStatus == 0">
              <el-button
                v-perms="['order:dispatch']"
                type="primary"
                @click="handleDispatch"
                >指派师傅</el-button
              >
            </div>

            <div v-if="btnStatus == 1" class="flex items-center">
              <!-- 选择地区列表 -->
              <el-cascader
                :options="options"
                :props="props2"
                @change="handleSelect"
              />
              <!-- 选择师傅列表 -->
              <el-select
                v-model="selStaff"
                multiple
                class="mx-2"
                value-key="id"
                @change="handleChange"
              >
                <el-option
                  v-for="item in staffData"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                  <div class="flex items-center">
                    <el-image
                      style="width: 30px; height: 30px; border-radius: 50%"
                      :src="item.avatarUrl"
                      :fit="'cover'"
                    />
                    <div class="mx-2">
                      {{ item.name }}
                    </div>
                  </div>
                </el-option>
              </el-select>
              <el-button @click="handleCancel">取消</el-button>
              <el-button type="primary" @click="handleConfirm"
                >确认指派</el-button
              >
            </div>

            <div v-if="btnStatus == 2" class="flex items-center">
              <div class="flex items-center">
                <el-image
                  style="width: 44px; height: 44px; border-radius: 50%"
                  :src="formData.staffImage"
                  :fit="'cover'"
                />
                <div class="mx-2">
                  {{ formData.staffName }}
                </div>
              </div>

              <el-button type="primary" @click="handleReDispatch"
                >重新指派</el-button
              >
            </div>
          </div>
          
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 服务师傅 End -->

    <!-- 预约信息 Start -->
    <el-card class="!border-none mt-4" shadow="never" style="padding: 0 20px">
      <template #header>
        <span class="font-medium nr">预约信息</span>
      </template>
      <!-- 预约信息 -->
      <el-form :inline="true" :model="formData" label-width="auto">
        <el-form-item label="预约时间: ">
          <div class="content">
            {{ formData.appointTime }} {{ formData.weekDay }}
            {{ formData.appointTimeStartStr }}-{{ formData.appointTimeEndStr }}
          </div>
        </el-form-item>
        <el-form-item label="联系人: ">
          <div class="content">{{ formData.contact || "-" }}</div>
        </el-form-item>
        <el-form-item label="手机号码: ">
          <div class="content">{{ formData.mobile || "-" }}</div>
        </el-form-item>
        <el-form-item label="预约地址: ">
          <div class="content">
            {{
              formData.province +
                formData.city +
                formData.district +
                formData.address || "-"
            }}
          </div>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 预约信息 End -->

    <!-- 服务信息 Start -->
    <el-card class="!border-none mt-4" shadow="never" style="padding: 0 20px">
      <template #header>
        <span class="font-medium nr">服务信息</span>
      </template>
      <!-- 服务信息 -->
      <el-table ref="tableDataRef" :data="goodsData" style="width: 100%">
        <el-table-column label="服务名称" width="400">
          <template #default="scope">
            <div class="flex items-center">
              <el-image
                style="width: 58px; height: 58px"
                :src="scope.row.goodsImage"
                :fit="'cover'"
              ></el-image>
              <div class="justify-center ml-2">{{ scope.row.goodsName }}</div>
            </div>
          </template>
        </el-table-column>
        <el-table-column property="goodsPrice" label="价格" width="300" />
        <el-table-column property="unitName" label="单位" width="300" />
        <el-table-column property="goodsNum" label="数量" width="300" />
        <el-table-column
          property="totalPayPrice"
          label="实付金额"
          width="120"
          fixed="right"
        />
      </el-table>
    </el-card>
    <!-- 服务信息 End -->

    <!-- 订单日志 Start -->
    <el-card class="!border-none mt-4" shadow="never" style="padding: 0 20px">
      <template #header>
        <span class="font-medium nr">订单日志</span>
      </template>
      <!-- 订单日志 -->
      <el-table
        ref="tableDataRef"
        :data="formData.orderLogList"
        style="width: 100%"
      >
        <el-table-column
          property="operatorName"
          label="操作人"
          max-width="300"
        />
        <el-table-column property="content" label="操作事件" max-width="300" />
        <el-table-column
          property="operateTime"
          label="操作时间"
          max-width="300"
        />
      </el-table>
    </el-card>
    <!-- 订单日志 End -->
  </div>
</template>

<script lang="ts" setup>
import {
  apiOrderDetail,
  apiMasterLists,
  apiDispatchStaff,
  apiDispatchStaffpost,
} from "@/api/order/lists";
import { ref } from "vue";
import Operation from "./components/operation.vue";
import area from "@/utils/area";
import feedback from "@/utils/feedback";

const route = useRoute();
const id = ref<any>(route.query.id);

const formData = ref<any>({});
const staffData = ref<any>([]);
const selStaff = ref<any>([]); // 当前选中的师傅
const staffIdList = ref<any>([]); // 当前选中的师傅id

const region = ref<any>(null); // 当前选中地区
const btnStatus = ref(0); // 0-显示指派 1-显示确认和取消 2-显示重新指派
const staff = ref<any>({});
const options = ref<any>(area); // 地区列表
const props2 = {
  checkStrictly: true,
};
const goodsData = ref<any>([
  {
    goodsId: "",
    goodsImage: "",
    goodsName: "",
    goodsNum: 0,
    goodsPrice: "",
    unitName: "",
    totalPayPrice: "",
  },
]);

// 获取订单详情
const getOrderDetail = async (val?: string): Promise<void> => {
  const res = await apiOrderDetail({ id: id.value });
  formData.value = res;
  for (const k in goodsData.value[0]) {
    goodsData.value[0][k] = formData.value[k];
  }
  if (val === "") formData.value.orderRemarks = val;
};

// 记录所选中的数据对象
const handleChange = (val: any) => {
  staff.value = val;
  return val;
};

// 选中不同地区的师傅列表
const handleSelect = async (val: number[]) => {
  // 记录所选地区
  region.value = val[val.length - 1];
  const params = {
    provinceId: val[0],
    cityId: val[1],
    districtId: val[2],
  };
  const { lists } = await apiMasterLists({ ...params });
  staffData.value = lists;
};

// 指派师傅
const handleDispatch = async () => {
  getOrderDetail();
  btnStatus.value = 1;
};

// 确认指派
const handleConfirm = async () => {
  if (!region.value) {
    feedback.msgError("请选择地区");
    return;
  } else if (selStaff.value.length == 0) {
    feedback.msgError("请选择师傅");
    return;
  }
  console.log(selStaff.value, selStaff.value.length, "selStaff.value.length");
  const staffIds = selStaff.value.join(",");
  const params = {
    id: formData.value.id,
    staffId: staffIds,
  };
  await apiDispatchStaff(params);
  feedback.msgSuccess("操作成功");
  btnStatus.value = 2;
  selStaff.value = [];
  getOrderDetail();
};

// 重新指派
const handleReDispatch = () => {
  btnStatus.value = 1;
  selStaff.value = [];
};

// 取消指派
const handleCancel = () => {
  btnStatus.value = 2;
  selStaff.value = [];
  getOrderDetail();
};

if (id.value) getOrderDetail();
onMounted(async () => {
  setTimeout(() => {
    if (formData.value.staffId && formData.value.orderStatus == 1) {
      btnStatus.value = 2;
    }
  }, 200);
});
</script>

<style lang="scss">
.order-detail-main .el-card__header,
.order-detail-main .el-card__body {
  padding: calc(var(--el-card-padding) - 2px) 0;
}
.content {
  width: 24vw;
}
.button-group {
  border-top: 1px solid #f2f2f2;
}
</style>
